import React, { useEffect, useState } from "react";
import { _getSellerList } from "./service";
import { Table,  Space, Button } from 'antd';
import { Link } from "react-router-dom";
import { LeftOutlined } from '@ant-design/icons';

const Home: React.FC = () => {

  const [datasource, setDatasource] = useState<any>();
  const role = localStorage.getItem('role')
  useEffect(() => {
    const fetchData = async () => {
      await _getSellerList().then((dataRes) => {
        dataRes.data.code === 200 && setDatasource(dataRes.data.data.list)
      })
    }

    fetchData()
  }, [])

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (_, rowData) => {
        return `${rowData.name}(${rowData.is_group_leader_v})`
      }
    },
    {
      title: '销售组名称',
      key: 'seller_group_name',
      dataIndex: 'seller_group_name',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, rowData) => (
        (role === '1' || role === '2') &&
        <Space size="middle">
          <Link to={"/sellertongji?id=" + rowData.id}><Button type="primary">业绩统计</Button></Link>
        </Space>
      ),
    },
  ];


  return (
    <>
      <div className="header">
        <a className="goback" onClick={() => { window.history.back() }} ><LeftOutlined /></a>
        <div className="header-title">
          销售列表
        </div>
      </div>
      <Table columns={columns} dataSource={datasource} pagination={false} rowKey={'id'} />
    </>
  )
}
export default Home;
